
.container {
  display: block;
  position: absolute;
  // padding: 2px 3px;
  left: -100px;
  top: -100px;
  pointer-events: none;
  z-index: 9999;

  .tooltip {
    text-align: center;
    padding: 0px 4px;
    white-space: pre;
  }

  .arrow-container {
    position: absolute;
    z-index: 9998;
    width: 12px;
    height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);

    .arrow {
      $ratio: 50%;
      width: $ratio;
      height: $ratio;
      transform: rotate(45deg);
      background-color: #222324;
      box-shadow: 0 0 0 1px #000, 0 0 0 2px rgb(70, 74, 77);
      border-radius: 10%;
    }
  }
}
